<template>
  <div class="items">
    <div class="handle">
      <el-button @click="insertPicItem" type="primary">+新增条目</el-button>
    </div>
    <div class="table">
      <div v-for="(tableItem, tableIndex) in tableData" :key="tableIndex" class="tableRow">
        <el-row>
          <el-col :span="24" class="picCol">
            <div class="pics">
              <div
                class="pic"
                v-for="(itemsItem, index) in tableItem.items"
                :key="index"
              >
                <div class="del">
                  <el-button icon="el-icon-delete" circle @click="delPicItem(tableItem, index)"></el-button>
                </div>
                <uploadCropper
                  style="height: 160px"
                  :handleAvatarSuccess="handlePicSuccess(itemsItem)"
                  :url="itemsItem.imgUrl"
                />
                <el-input
                  placeholder="链接"
                  v-model="itemsItem.linkUrl"
                  style="width: 100%"
                ></el-input>
              </div>
              <el-button
                @click="insertPic(tableItem)"
                type="primary"
                icon="el-icon-plus"
                circle
              ></el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8"
            ><el-input placeholder="子标题" v-model="tableItem.name"></el-input
          ></el-col>
          <el-col :span="6">
            <el-input placeholder="权重" v-model="tableItem.weight"></el-input>
          </el-col>
          <el-col :span="10">
            <el-button type="text" @click="saveItem(tableItem, tableIndex)"
              >{{ tableItem.isNew ? '保存' : '更新'}}</el-button
            >
            <el-button type="text" @click="delItem(tableItem, tableIndex)"
              >删除</el-button
            >
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="paginationCommon">
      <el-pagination
        background
        :page-size="limit"
        :total="total"
        @current-change="getList"
        layout="prev, pager, next"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["originForm2", "isEdit", "closeEditModal", "zlId"],
  data() {
    return {
      limit: 5,
      total: 0,
      tableData: [],
    };
  },
  methods: {
    insertPicItem() {
      this.tableData.push({
        name: "子标题",
        weight: "1",
        items: [
          {
            imgUrl: "",
            linkUrl: "",
          },
        ],
        isNew: true,
      });
    },
    delPicItem(itemsItem, index) {
      console.log(itemsItem, index)
      itemsItem.items.splice(index, 1)
    },
    insertPic(row, index) {
      row.items.push({
        imgUrl: "",
        linkUrl: "",
      });
    },
    handlePicSuccess(itemsItem, res, file) {
      const itemsItem1 = itemsItem;
      return (res, file) => {
        const fileObj = this.$utils.judgeLogin(res);
        itemsItem1.imgUrl = fileObj.url;
        this.tableData = JSON.parse(JSON.stringify(this.tableData));
        console.log(this.tableData);
      };
    },
    saveItem(row, index) {
      const ajaxType = !row.isNew ? "put" : "post";
      const url = row.isNew
        ? `/api/zl/title/${this.originForm2.uuid}/sub.json`
        : `/api/zl/title/sub/${row.uuid}.json`;
      this.$axios[ajaxType](url, row).then((response) => {
        this.$message.success("提交成功");
        this.getList();
      });
    },
    delItem(row, index) {
      if (row.isNew) {
        this.tableData.splice(index, 1);
        return;
      }
      this.$axios["delete"](`/api/zl/title/sub/${row.uuid}.json`, row).then(
        (response) => {
          this.$message.success("提交成功");
          this.getList();
        }
      );
    },
    getList(page = 1) {
      const { formInline, limit } = this;
      const start = (page - 1) * limit || 0;;
      const params = {
        start,
        limit
      };
      this.$axios
        .get(`/api/zl/title/${this.originForm2.uuid}/sub.json`, {params})
        .then((response) => {
          this.tableData = response.list;
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.pics {
  display: flex;
  flex-direction: row;
  align-items: center;

  // max-width: 400px;
  display: flex;
  flex-wrap: wrap;
  .pic {
    width: 150px;
    height: 150px;
    margin-bottom: 50px;
    position: relative;
  }
}
.tableRow {
  display: flex;
  align-items: center;
  &:not(:last-child) {
    border-bottom: 1px solid #ccc;
  }
  .picCol {
  }
}
.del {
  position: absolute;
  right: 5px;
  top: 15px;
  z-index: 888;
}
</style>
